import { Button,Input,Select,message,Modal } from 'antd'
import { UpSquareOutlined,DownSquareOutlined,CloseCircleOutlined} from '@ant-design/icons';
import React,{useRef,useState} from 'react'
import {useNavigate} from 'react-router-dom'
import store from '../../../store/LeiZheng'
import { observer } from 'mobx-react-lite'

const {Option} = Select
const {goods} = store
const {confirm } = Modal
export default observer(function Header() {
    const searchInput = useRef()
    const [status,setStatus] = useState('请选择')
    const [type,setType] = useState('请选择')
    const [inputVal,setInputVal] = useState('')
    const navigate = useNavigate()
    const handleChangeType = (value) => {
        // console.log(`selected ${value}`);
        setType(value)
        goods.selectType(value)
    };
    const handleChangeStatus = (value) => {
        // console.log(`selected ${value}`);
        setStatus(value)
        goods.selectStatus(value)
    };
    const add = ()=>{
        // message.info('add')
        navigate('/home/goodsManagement/addgoods')
    }
    const shangjia = ()=>{
        // message.info('shangjia')
        // console.log(goods.selectGoods)
        if(goods.selectGoods.length === 0){
            return message.warn('请选择商品！')
        }
        confirm({
            title: `上架?`,
            icon: <UpSquareOutlined />,
            content: `您确定把选择的商品的状态改为上架`,
            onOk() {
            //console.log(goods.selectGoods);
                goods.changeGoodsStatue(goods.selectGoods,'上架')
                message.success('修改成功');
            },
            onCancel() {
                message.info('取消');
            },
          });
    }      
    const xiajia = ()=>{
        if(goods.selectGoods.length === 0){
            return message.warn('请选择商品！')
        }
        confirm({
            title: `下架?`,
            icon: <DownSquareOutlined />,
            content: `您确定把选择的商品的状态改为下架`,
            onOk() {
                goods.changeGoodsStatue(goods.selectGoods,'下架')
                message.success('修改成功');
            },
            onCancel() {
                message.info('取消');
            },
          });
    }    
    const del = ()=>{
        // message.info('del')
          if(goods.selectGoods.length === 0){
            return message.warn('请选择商品！')
        }
        confirm({
            title: `删除?`,
            icon: <CloseCircleOutlined />,
            content: `您确定把选择的商品删除？？`,
            onOk() {
                goods.deleteGoods(goods.selectGoods)
            },
            onCancel() {
                message.info('取消');
            },
          });
    }
    const reset = ()=>{
        // console.log('重置');
        setStatus('请选择')
        setType('请选择')
        setInputVal('')
        // goods.searchGoods('')
        goods.selectType('全部')
    }
    const query = ()=>{
        // goods.getGoodsData()
        const length = goods.searchGoods(searchInput.current.input.value)
        if(length === 0) message.warning('未找到')
    }
    const inputChange = (e)=>{
        setInputVal(e.target.value)
    }
    const keyupHandler = (e)=>{
        if(e.key === 'Enter')
        query()
    }

  return (
    <div className='header'>
        <div className="btn">
            <Button style={{marginRight:'4px'}} onClick={reset}>重置</Button>
            <Button type='primary' onClick={query}>查询</Button>
        </div>
        <div className="title">
            <div className='info'>商品信息</div>
            <div className="input">
                <div className="input-item">
                    <span>商品名称：</span>
                    <Input value={inputVal} onKeyUp={keyupHandler} onChange={inputChange} ref={searchInput} placeholder='商品名称'/>
                </div>
                <div className="input-item">
                    <span>类目：</span>
                    <Select placeholder="请选择" value={type} style={{ width: 300 }} onChange={handleChangeType}>
                        {
                        goods.goodsType.map((i)=>{
                                return  <Option key={i} value={i}>{i}</Option>
                            })
                        }
                    </Select>
                </div>
                <div className="input-item">
                    <span>状态：</span>
                    <Select placeholder="请选择" value={status} style={{ width: 300 }} onChange={handleChangeStatus}>
                        <Option value="全部">全部</Option>
                        <Option value="上架">上架</Option>
                        <Option value="下架">下架</Option>
                    </Select>
                </div>
            </div>
        </div>
        <div className="funbtn">
            <Button onClick={add} type='primary' style={{marginRight:'10px'}}>新增</Button>
            <Button onClick={shangjia} type='primary' style={{marginRight:'10px'}}>上架</Button>
            <Button onClick={xiajia} type='primary' style={{marginRight:'10px'}}>下架</Button>
            <Button onClick={del} type='primary'>删除</Button>
        </div>
    </div>
  )
})
